<template>
    <view class="p_10">
        <u--form
            labelPosition="left"
            :model="model1"
            :rules="rules"
            ref="uForm"
        >
            <u-form-item
                label="客户简称"
                labelWidth="150rpx"
                required
                prop="orderForm.userName"
                borderBottom
                ref="item1">
                <u--input
                    v-model="model1.orderForm.userName"
                    border="surround">
                </u--input>
            </u-form-item>

            <u-form-item
                label="客户ID"
                labelWidth="150rpx"
                required
                prop="orderForm.userId"
                borderBottom
                ref="item1">
                <u--input
                    v-model="model1.orderForm.userId"
                    border="surround">
                </u--input>
            </u-form-item>
            <u-form-item
                label="产品ID"
                labelWidth="150rpx"
                required
                prop="orderForm.productId"
                borderBottom
                ref="item1">
                <u--input
                    v-model="model1.orderForm.productId"
                    @blur="getComputedStyle()"
                    border="surround">
                </u--input>
            </u-form-item>
            <u-picker :show="isShowProductName" :columns="productNameList" keyName="productName" @confirm="confirm" @cancel="close"></u-picker>
            <u-form-item
                label="产品名称"
                labelWidth="150rpx"
                required
                prop="orderForm.productName"
                borderBottom
                ref="item1">
                <u--input
                    v-model="model1.orderForm.productName"
                    readonly
                    border="surround">
                </u--input>
            </u-form-item>
            <u-form-item
                label="含税单价"
                labelWidth="150rpx"
                required
                prop="orderForm.price"
                borderBottom
                ref="item1">
                <u--input
                    v-model="model1.orderForm.price"
                    readonly
                    border="surround">
                </u--input>
            </u-form-item>
            <u-form-item
                label="数量"
                labelWidth="150rpx"
                required
                prop="orderForm.number"
                borderBottom
                ref="item1">
                <u--input
                    v-model="model1.orderForm.number"
                    border="surround"
                >
                </u--input>
            </u-form-item>
            <u-form-item
                label="备注"
                labelWidth="150rpx"
                prop="orderForm.remark"
                borderBottom
                ref="item1">

                <u--textarea v-model="model1.orderForm.remark"
                             placeholder="请输入内容" autoHeight>
                </u--textarea>
            </u-form-item>

            <view class="button-container">

                <u-button shape type="primary" iconColor="white" @click="countPrice">
                    订单总价
                </u-button>

                <u-button type="primary" @click="submitForm">
                    提交订单
                </u-button>

            </view>


        </u--form>
    </view>
</template>

<script>
import {addOrderForm, postSearchProducts} from "@/sheep/api";

export default {
    data() {
        return {
            isShowProductName: false,
            model1: {
                orderForm: {
                    userName: '',
                    userId: '',
                    productId: '',
                    productName: '',
                    price: '',
                    number: '',
                    remark: '',
                },
            },
            productList: [], // 存储模糊查询结果
            productNameList: [], // 存储模糊查询结果
            rules: {
                'orderForm.userName': {
                    type: 'string',
                    required: true,
                    message: '客户简称',
                    trigger: ['blur', 'change']
                },
                'orderForm.userId': {
                    type: 'string',
                    required: true,
                    message: '客户ID',
                    trigger: ['blur', 'change']
                },
                'orderForm.productId': {
                    type: 'string',
                    required: true,
                    message: '产品ID',
                    trigger: ['blur', 'change']
                },
                'orderForm.productName': {
                    type: 'string',
                    required: true,
                    message: '产品名称（自动读取）',
                    trigger: ['blur', 'change']
                },
                'orderForm.price': {
                    type: 'string',
                    required: true,
                    message: '含税单价',
                    trigger: ['blur', 'change']
                },
                'orderForm.number': {
                    type: 'string',
                    required: true,
                    message: '数量',
                    trigger: ['blur', 'change']
                },


            },

        };
    },

    onShow(options) {
    },
    methods: {
        submitForm() {
            console.log("this.model1.orderForm",this.model1.orderForm)
            this.$refs.uForm.validate().then(res => {
                addOrderForm(this.model1.orderForm).then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'success',
                        duration: 2000,

                    })
                    if (res.code === 200){
                        // 延时3秒后跳转
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 3000);
                    }
                });
            })
        },
        countPrice(){
            if (!this.model1.orderForm.price){
                uni.showToast({
                    title: '请输入含税单价',
                    icon: 'none',
                    duration: 2000,

                })
            }
            if (!this.model1.orderForm.number){
                uni.showToast({
                    title: '请输入数量',
                    icon: 'none',
                    duration: 2000,

                })
            }
            var s = this.model1.orderForm.number*this.model1.orderForm.price;
            uni.showToast({
                title: '订单总价为：'+s,
                icon: 'none',
                duration: 2000,

            })

        },
        confirm( value){
            console.log(value)
            var valueElement = value.value[0];
            console.log(valueElement)
            let productId = valueElement.productIdTwo;
            let price = valueElement.price;
            this.model1.orderForm.productName=valueElement.productName;
            this.model1.orderForm.price= price;
            this.model1.orderForm.productId= productId+"";
            this.isShowProductName=false;
            this.$forceUpdate();

        },
        close(){
            this.isShowProductName=false;
        },
        getComputedStyle() {
                postSearchProducts({productIdTwo: this.model1.orderForm.productId}).then((res) => {
                    if (res.code === 200) {
                        this.productNameList = [res.data];
                        this.isShowProductName=true;
                    }
                });

        },

    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$refs.uForm.setRules(this.rules)
    },
};
</script>

<style lang="scss" scoped>
.button-container {
    display: flex; /* 使按钮在同一行显示 */
    padding-top: 30rpx;
    justify-content: space-between; /* 可以根据需要调整按钮之间的间距 */

    gap: 50px; /* 设置按钮之间的间隔 */

}


</style>
